<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="resources/templates/mainTemplate.xhtml">
    
    <ui:param name="pagetitle" value="CHUMS - Settings"/>
    
    <ui:define name="centerContent" class="turquaz"> 
        
        <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>  

        <p:dialog appendToBody="true" resizable="false" modal="true" widgetVar="statusDialog" header="Loading"   
                  draggable="false" closable="false">  
            <p:graphicImage value="resources/images/ajax-loader.gif" />
        </p:dialog> 
        
        <center>
<!--          <div>
            <input type="text" id="taginput"/>
        </div>  -->
<!--        <script type="text/javascript">
        $("#taginput")
        .suggest({"key": "AIzaSyBBJoStIWMWfWkgHIoRtLCCAg8B4ay2Vk8"})
        .bind("fb-select", function(e, data) {
         alert(data.name + ", " + data.id + " (" + data['n:type'].name + ")");
         });
        </script>-->
            <script type="text/javascript">
                $(function() {
                    $("#taginput").suggest();
                });
            </script>
            
            
            
            <h:form id="formMyTags" prependId="false" >
                <p:fieldset legend="Registered Tag">  
                    
                    <p:inputText autocomplete="on" id="taginput" value="#{TagBean.toBeAddedTagType.name}" />
                    <p:commandButton id="tagSubmit" value="Submit" update="formMyTags" action="#{TagBean.addTag}"/>

                    <h:panelGrid columns="1"  cellpadding="10"> 
                        <p:growl id="growlMyTags"  showDetail="true" showSummary="false" life="5000" redisplay="false" />  
                        <p:dataTable id="myTagsTableID" 
                                     var="tag" 
                                     value="#{TagBean.myTags}" 
                                     paginator="true" 
                                     rows="10"
                                     rowsPerPageTemplate="10,15,20"
                                     rowKey="#{tag.id}"
                                     emptyMessage="No Rows"
                                     editable="true">

                            <p:ajax event="filter" listener="#{TagBean.onFilter}" update = ":formMyTags:myTagsTableID"/>

                            <f:facet name="header">
                                <h:outputText value="My Tags" />
                            </f:facet>

                            
<!--                            <p:column sortBy="#{tag.userText}" 
                                      headerText="Name" 
                                      filterBy="#{tag.userText}"  
                                      filterMatchMode="contains"
                                      >

                                <f:facet name="header">
                                    <h:outputText value="Name" />
                                </f:facet>

                                <h:outputText value="#{tag.userText}" />
                            </p:column> -->

                            <p:column sortBy="#{tag.tagTypeText}" 
                                      headerText="tag" 
                                      filterBy="#{tag.tagTypeText}"  
                                      filterMatchMode="contains"
                                      >

                                <f:facet name="header">
                                    <h:outputText value="tag" />
                                </f:facet>

                                <h:outputText value="#{tag.tagTypeText}" />
                            </p:column>
                            
                            <p:column headerText="Delete" 
                                      >  

                                <p:commandButton style="align: center"  icon="ui-icon-close"  update=":formMyTags:myTagsTableID :formMyTags:growlMyTags"
                                                 oncomplete="confirmation.show()">
                                    <f:setPropertyActionListener value="#{tag}" target="#{TagBean.toBeRemovedUserTag}" />
                                </p:commandButton>

                            </p:column>   
                            
<!--                            <p:column sortBy="#{tag.webResourceText}" 
                                      headerText="Resource" 
                                      filterBy="#{tag.webResourceText}"  
                                      filterMatchMode="contains"
                                      >

                                <f:facet name="header">
                                    <h:outputText value="Resource" />
                                </f:facet>

                                <h:outputText value="#{tag.webResourceText}" />
                            </p:column>-->
                            
                            <!--<p:column sortBy="#{tag.tagValue}" 
                                      headerText="Value" 
                                      filterBy="#{tag.tagValue}"  
                                      filterMatchMode="contains"
                                      >

                                <f:facet name="header">
                                    <h:outputText value="Value" />
                                </f:facet>

                                <h:outputText value="#{tag.tagValue}" />
                            </p:column>
                            
                            <p:column sortBy="#{tag.time}" 
                                      headerText="Date" 
                                      filterBy="#{tag.time}"  
                                      filterMatchMode="contains"
                                      >

                                <f:facet name="header">
                                    <h:outputText value="Date" />
                                </f:facet>

                                <h:outputText value="#{tag.time}" />
                            </p:column>
                           -->
                            
                        </p:dataTable>

                    </h:panelGrid>  

                </p:fieldset>
            </h:form> 
            <p:confirmDialog appendToBody="true" id="confirmDialog" message="Are you sure you want to delete this source?" header="Delete Source" severity="alert" widgetVar="confirmation">  
                <h:form>
                    <center>
                        <p:commandButton id="confirm" value="Yes" update=":formMyTags:myTagsTableID :formMyTags:growlMyTags" oncomplete="confirmation.hide();" action="#{TagBean.removeUserTag}" />  
                        <p:commandButton id="decline" value="No" onclick="confirmation.hide()" type="button" />   
                    </center>
                </h:form>
            </p:confirmDialog> 
        </center>
     
    </ui:define>
    
    <ui:define name="leftContent" class="turquaz">
            
        <ui:include src="settingsLeftPanel.xhtml" />
            
    </ui:define> 
        
    
</ui:composition>

